<template>
  <div id="style2" class="app-container">
      <h1>预约挂号</h1>
       <el-form label-width="120px">
         <el-form-item label="宠物主人名称">
             <el-col :span="8">
            <el-input v-model="reserve.name"/>
             </el-col>
         </el-form-item>

         <el-form-item label="手机号码">
             <el-col :span="8">
            <el-input v-model="reserve.phoneNumber"/>
             </el-col>
         </el-form-item>

         <!-- <el-form-item label="宠物类型">
             <el-col :span="8">
            <el-input v-model="reserve.petType"/>
            </el-col>
         </el-form-item> -->

         <el-form-item label="宠物类型">
         <el-select v-model="reserve.petType" placeholder="请选择宠物类型">
        <el-option
        v-for="item in petTypes"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
         </el-select>
        </el-form-item>

         <el-form-item label="宠物年龄">
             <el-col :span="8">
            <el-input v-model="reserve.petAge"/>
            </el-col>
         </el-form-item>
        
        <el-form-item label="请选择预约项目">
         <el-select v-model="reserve.reserveItem" placeholder="请选择预约项目">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
         </el-select>
        </el-form-item>

    <el-form-item label="病症说明">
        <el-col :span="8">
        <el-input type="textarea" v-model="reserve.remark"></el-input>
        </el-col>
  </el-form-item>

    <!-- <el-form-item label="预约时间">
        <div class="block">
        <span class="demonstration"></span>
        <el-date-picker
        v-model="reserve.bufferTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
        </el-date-picker>
    </div>
    </el-form-item> -->

         <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">保存</el-button>
         </el-form-item>
      </el-form>
  </div>
</template>

<script>
import reserve from '@/api/reserve'
export default {
  data() {
      return {
         reserve:{},//reserve对象
         petTypes: [{
          value: '犬类',
          label: '犬类'
        },
        {//选择框数据
          value: '猫科',
          label: '猫科'
        },
        {//选择框数据
          value: '鸟类',
          label: '鸟类'
        },
        {//选择框数据
          value: '甲壳类',
          label: '甲壳类'
        },
        {//选择框数据
          value: '其他',
          label: '其他'
        }],
        
         options: [{//选择框数据
          value: '预约挂号',
          label: '预约挂号',
        },{value: '健康体检',
          label: '健康体检'
        }, {
          value: '犬猫驱虫',
          label: '犬猫驱虫'
        }, {
          value: '宠物绝育',
          label: '宠物绝育'
        }, {
          value: '洗浴美容',
          label: '洗浴美容'}], 

        //日期控件
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() + 3600 * 1000 * 24 < Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '明天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

      }
   },
   created() {//页面渲染之前执行
      //获取路由id值
      //调用接口得到预约信息
      if(this.$route.params && this.$route.params.id) {
         const id = this.$route.params.id
         this.getReserve(id)
      } else {
         //表单数据清空
         this.reserve = {}
      }
   },
   methods: {
      //根据id查询
      getReserve(id) {
         reserve.getReserve(id) 
            .then(response => {
               this.reserve = response.data
            })
      },
      //添加
      save() {
         reserve.saveReserve(this.reserve)
            .then(response => {
               //提示
               this.$message({
                  type: 'success',
                  message: '添加成功!'
               })
               //跳转列表页面，使用路由跳转方式实现
               this.$router.push({path:'/reserve/list'})
            })
      },
      //修改
      update() {
         reserve.updateReserve(this.reserve)
            .then(response => {
               //提示
               this.$message({
                  type: 'success',
                  message: '修改成功!'
               })
               //跳转列表页面，使用路由跳转方式实现
               this.$router.push({path:'/reserve/list'})
            })
      },
      saveOrUpdate() {
         //判断添加还是修改
         if(!this.reserve.id) { //没有id，做添加
            this.save();
         }else {//修改
            this.update()
         }
      }
   }

}
</script>

<style>
#style2{
background:url(../../images/2.jpg);
width:100%; 
height:100%;  
position:absolute;
background-size:100% 100%;}
</style>